<script setup>
import { get } from '@/request/request'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import { onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';

const money = ref('');
const totalMoney = ref('');

onShow(() => {
  distMoney();
  withdrawal();
})

const shareClick = () => {
  uni.navigateTo({
    url: '/pages/popularize/components/share-qr'
  })
}

const OutreachClick = () => {
  uni.navigateTo({
    url: '/pages/popularize/components/Outreach'
  })
}
const payoutsClick = () => {
  console.log('ooo')
  uni.navigateTo({
    url: '/pages/popularize/components/Payouts'
  })
}

const moneyhistoryClick = () => {
  uni.navigateTo({
    url: '/pages/popularize/components/MoneyHistory'
  })
}


const distMoney = () => {
  get('/user_dist_money', {
    "Content-Type": "application/x-www-form-urlencoded",
    sessionKey: uni.getStorageSync("sessionKey"),
  }).then(res => {
    const { data } = res;
    money.value = data;
    console.log('distMoney', data);
  })
}

const withdrawal = () => {
  get('/user_withdrawal', {
    "Content-Type": "application/x-www-form-urlencoded",
    sessionKey: uni.getStorageSync("sessionKey"),
  }).then(res => {
    const { data } = res;
    totalMoney.value = data;
    console.log('withdrawal', data);
  })
}
</script>

<template>
  <view class="popularize">
    <view class="top-box"></view>
    <view class="money-box">
      <view style="font-size: 32rpx;font-weight: 600">余额明细</view>
      <view class="money">
        <view style="font-size: 56rpx;color: #0052D9">{{ money }}</view>
        <view style="text-align: center">
          <view style="font-size: 36rpx;color: #0052D9">{{ totalMoney.total }}</view>
          <view style="font-size: 24rpx">累计提现</view>
        </view>
      </view>
      <view class="money-btn">
        <TnButton :width="176" :height="64" shape="round" bg-color="#0053D9" text-color="#fff" @click="payoutsClick">
          我要提现
        </TnButton>
        <TnButton :width="176" :height="64" shape="round" plain border-color="#0052D9" text-color="#0052D9"
          @click="moneyhistoryClick">
          提现记录
        </TnButton>
      </view>
    </view>
    <view class="money-list">
      <view class="money-list-item">
        <view class="money-list-item-right">
          <view class="images">
            <image src="/static/populazire/qr.svg" />
          </view>
          <view class="right-title">推广名片</view>
        </view>
        <view class="left-btn" @click="shareClick">分享</view>
      </view>
      <view class="money-list-item">
        <view class="money-list-item-right">
          <view class="images">
            <image src="/static/populazire/prob.svg" />
          </view>
          <view class="right-title">推广统计</view>
        </view>
        <view class="left-btn" @click="OutreachClick">查看</view>
      </view>
      <view class="money-list-item">
        <view class="money-list-item-right">
          <view class="images">
            <image src="/static/populazire/invoice.svg" />
          </view>
          <view class="right-title">佣金明细</view>
        </view>
        <view class="left-btn">查看</view>
      </view>
    </view>
  </view>
</template>
<style scoped lang="scss">
.popularize {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .top-box {
    width: 100%;
    height: 240rpx;
    background: #0052D9;

  }

  .money-box {
    margin-top: -200rpx;
    width: 686rpx;
    height: 312rpx;
    background: #FFFFFF;
    border-radius: 18rpx;

    padding: 20rpx;

    .money {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .money-btn {
      margin-top: 50rpx;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
  }

  .money-list {
    margin-top: 50rpx;
    width: 686rpx;
    height: 480rpx;
    background: #FFFFFF;
    border-radius: 18rpx;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    padding: 20rpx;

    .money-list-item {
      width: 622rpx;
      height: 96rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .money-list-item-right {
        display: flex;
        align-items: center;

        .images {
          width: 96rpx;
          height: 96rpx;
          background: #0052D9;
          border-radius: 48rpx;
          display: flex;
          align-items: center;
          justify-content: center;

          image {
            width: 64rpx;
            height: 64rpx;
          }
        }

        .right-title {
          margin: 10rpx;
        }
      }

      .left-btn {
        width: 120rpx;
        height: 64rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #DCDCDC;
        border-radius: 200rpx;
      }
    }
  }
}
</style>